<template>
  <div class="artdet" v-if="article">
    <!-- 最上面,返回箭头,头像,发布者昵称,关注 (滚动位置不变) -->
    <div class="headerall">
      <div class="header">
        <!-- 返回icon             -->
        <img
          @click="$router.go(-1)"
          class="arrow"
          src="../assets/zuo1.png"
          alt=""
        />
        <!-- 头像 -->
        <img
          class="headerava"
          :src="$store.state.imgBase + article.user.avatarUrl"
          alt=""
        />
        <!-- 发布者昵称 -->
        <div>{{ article.user.username }}</div>
        <!-- 关注 -->
        <div class="headerfollow" @click="ifFollow()">
          <img :src="require('@/assets/jiaguanzhu.png')" v-if="follow" />
          <img :src="require('@/assets/yiguanzhu.png')" v-if="!follow" />
        </div>
      </div>
    </div>

    <!-- 内容图片部分,轮播图形式 -->
    <div class="content_img" v-if="article">
      <video
        autoplay
        muted
        width="100%"
        v-if="article.article.type == 2 && article.video !== null"
        :src="$store.state.imgBase + article.video.vedioUrl"
      ></video>
      <mt-swipe
        v-if="
          article.article.type == 1 ||
          article.article.type == 3 ||
          article.article.type == 4
        "
        :auto="0"
        style="height: 56vw; top: 15vw"
      >
        <mt-swipe-item v-for="img in article.imgs" :key="img.id">
          <img :src="$store.state.imgBase + img.imgUrl"
        /></mt-swipe-item>
      </mt-swipe>
    </div>
    <!-- 内容详情部分--标题,段落;发布时间,地点,不喜欢 -->
    <div class="content_det">
      <!-- 标题 -->
      <h3>{{ article.article.title }}</h3>
      <!-- 段落 -->
      <p>{{ article.article.text }}</p>
      <!-- 发布时间,地点,不喜欢 -->
      <div class="content_det_component">
        <!-- 时间,地点 -->
        <!-- {{moment.unix(article.user.createTime).format(
                    'YYYY年MM月DD日 HH:mm:ss')}} -->
        <!--时间 | 北京 -->
        <div class="timeplace">
          {{
            moment(article.article.createTime).format("YYYY年MM月DD日 HH:mm:ss")
          }}
        </div>
        <!-- 不喜欢 -->
        <!-- <div class="dislike" @click="ifLike()">
          <van-cell is-link @click="showPopup">
            <img :src="require('@/assets/dislike.png')" v-if="like" />
            <img :src="require('@/assets/dislike1.png')" v-if="!like" />
            <span>不喜欢</span>
          </van-cell>
          <van-popup
            class="popup"
            v-model="show"
            closeable
            close-icon="close"
            round
            position="bottom"
            :style="{ height: '30%', width: '100%' }"
          >
            <van-cell is-link @click="XinSui"
              ><img src="../assets/icon_buxihuanxinsui.png" alt="" />
              不感兴趣</van-cell
            >
            <van-popup
              v-model="xinsui"
              round
              :style="{ height: '10%', background: '#f5d4a9' }"
              ><span>将为您减少此类推荐</span>
            </van-popup>

            <van-cell is-link @click="WuYu"
              ><img src="../assets/wuyulian.png" alt="" />
              不喜欢该作者</van-cell
            >
            <van-popup
              v-model="wuyu"
              round
              :style="{ height: '10%', background: '#f5d4a9' }"
              ><span>将为您减少此类作者推荐</span></van-popup
            >

            <van-cell is-link @click="JuBao"
              ><img src="../assets/jubao.png" alt="" /> 举报</van-cell
            >
            <van-popup
              v-model="jubao"
              round
              :style="{ height: '8%', background: '#f5d4a9' }"
              ><span>已为您举报</span></van-popup
            >
          </van-popup>
        </div> -->
      </div>
    </div>
    <!-- 分割线 -->
    <div class="divider">
      <img src="../assets/fengye.png" alt="" />
      <img src="../assets/fengye.png" alt="" />
      <img src="../assets/fengye.png" alt="" />
      <img src="../assets/fengye.png" alt="" />
      <img src="../assets/fengye.png" alt="" />
      <img src="../assets/fengye.png" alt="" />
      <img src="../assets/fengye.png" alt="" />
    </div>
    <!-- 评论部分 -->
    <div class="content_comment" v-if="comments">
      <!-- <div>共12条评论</div> -->
      <!-- 评论组合,头像,昵称,评论内容 -->
      <div class="comment_component" v-for="item in comments" :key="item.id">
        <!-- 头像 -->
        <div class="cca">
        <img
          class="componentava"
          :src="$store.state.imgBase + (item && item.userDo.avatarUrl)"
          alt=""
        />
        <!-- 昵称 -->
        <span>{{ item && item.userDo.username }}</span>
        </div>
        <!--评论内容  -->
        <div class="comment_det">{{ item && item.commentDo.text }}</div>
      </div>
    </div>

    <!-- 输入评论,点赞收藏等部分(滚动位置不变) -->
    <div class="footer">
      <div class="footerdiv">
        <!-- 输入评论部分 -->
        <div class="footer_comment">
          <mt-field
            style="
              margin-left: 2vw;
              height: 2vw;
              width: 50vw;
              border: 1px solid gray;
              border-radius: 10vw;
              vertical-align: center;
            "
            placeholder="说点什么.."
            type="text"
            v-model="text"
            resetField
          ></mt-field>
          <mt-button
            class="addButton"
            type="default"
            size="small"
            @click.native.capture="addComment"
            >发送</mt-button
          >
        </div>
        <!-- 点赞收藏等部分 -->
        <div class="footer_component">
          <van-icon
            @click="like = 1; likeAdd(); "
            v-if="like == 0"
            name="like-o"
            size="1rem"
          />
          <van-icon
            @click="like = 0; likeDel(); "
            v-else
            name="like"
            color="#f00"
            size="1rem"
          />
          <span>{{ like_num }}</span>
          <van-icon
            @click="star = 1; starAdd(); "
            v-if="star == 0"
            name="star-o"
            size="1rem"
          />
          <van-icon
            @click="star = 0; starDel(); "
            v-else name="star"
            color="#f00"
            size="1rem"
          />
          <span>{{ star_num }}</span>
          
          <!-- <van-icon size="1.5em" name="comment-o" /><span>66</span> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    window.scrollTo(0, 0);
    this.text=''
    let articleId = this.$route.query.articleId;
    console.log("当前选中的文章id", articleId);
    //  获取详情页
    let url = `/op/articleDo/getArticle?articleId=${articleId}`;
    this.axios
      .get(url, {
        "Context-Type": "application/json",
        headers: { accesstoken: this.$store.state.accesstoken },
      })
      .then((res) => {
        console.log("当前文章详细内容", res);

        this.article = res.data.data;
        console.log(" article.video", this.article.video);
        console.log("shiian", this.article.article.createTime);
        this.$store.state.goodCont = res.data.data.article.goodCont;
        this.$store.state.collCont = res.data.data.article.collCont;
        this.like_num = res.data.data.article.goodCont;
        this.star_num = res.data.data.article.collCont;
        console.log("点赞数", this.$store.state.goodCont);
        console.log("收藏数", this.$store.state.collCont);
      });
    // 获取评论
    // let articleId=this.$route.query.articleId
    let url1 = `/op/commentDo/getCommenList?articleId=${articleId}`;
    this.axios
      .get(url1, {
        "Context-Type": "application/json",
        headers: { accesstoken: this.$store.state.accesstoken },
      })
      .then((res) => {
        console.log("当前评论详细内容", res);
        this.comments = res.data.data;
        console.log("this.comments", this.comments);
      });
  },
  data() {
    return {
      like_num: null,
      star_num: null,
      article: null,
      follow: true,
      like: 0,
      star:0,
      comments: null,
      // liked: false,
      // like_count: 20,
      // stared: false,
      // star_count: 55,
      // show: false,
      // xinsui: false,
      // wuyu: false,
      // jubao: false,

      text: '',
      articleId: "",
      createBy: "",
    };
  },
  methods: {
    addComment() {
      // /op/commentDo/saveCommen

      let articleId = this.$route.query.articleId;
      let params = {
        articleId: articleId,
        text: this.text,
        createBy: this.$store.state.id,
      };
      // console.log(params);
      console.log("评论内容", params.text);
      // let params=`articleId=${articleId}&text=${this.text}&createBy=${this.$store.state.id}`
      let url = `/op/commentDo/saveCommen`;
      this.axios
        .post(url, params, {
          "Context-Type": "application/json",
          headers: { accesstoken: this.$store.state.accesstoken },
        })
        .then((res) => {
          console.log("发布de评论", res);

          if (res.data.code == 2000) {
            this.$messagebox("提示", "发表成功");
          } else {
            this.$messagebox("提示", "发表失败");
          }
        this.text=''
        });

      // 获取评论
      // let articleId=this.$route.query.articleId
      let url1 = `/op/commentDo/getCommenList?articleId=${articleId}`;
      this.axios
        .get(url1, {
          "Context-Type": "application/json",
          headers: { accesstoken: this.$store.state.accesstoken },
        })
        .then((res) => {
          console.log("当前评论详细内容", res);
          this.comments = res.data.data;
          console.log("this.comments", this.comments);
        });
    },

    JuBao() {
      this.jubao = true;
    },
    WuYu() {
      this.wuyu = true;
    },
    XinSui() {
      this.xinsui = true;
    },
    showPopup() {
      this.show = true;
    },
    ifFollow() {
      this.follow = !this.follow;
    },
    // 花朵那块的喜欢
    // ifLike() {
    //   this.like = !this.like;
    // },
    // 点赞收藏喜欢
    likeDel() {
      let url = `/op/goodDo/nogood`;
      let params = {
        userId: this.$store.state.id,
        articleId: this.$route.query.id,
      };
      this.axios
        .post(url, params, {
          "Context-Type": "application/json",
          headers: { accesstoken: this.$store.state.accesstoken },
        })
        .then((res) => {
          console.log("取消点赞", res);
          if (res.data.code == 5000) {
            this.like_num--;
          }
        });
    },
    likeAdd() {
      let url = `/op/goodDo/good`;
      let params = {
        userId: this.$store.state.id,
        articleId: this.$route.query.id,
      };
      this.axios
        .post(url, params, {
          "Context-Type": "application/json",
          headers: { accesstoken: this.$store.state.accesstoken },
        })
        .then((res) => {
          console.log("点赞上传", res);
          // if (res.data.code == 2000 ) {

          //   this.$store.state.goodCont++;

          // }
          this.like_num++;
        });
    },
    starDel() {
      let url = `/op/collDo/nocool`;
      let params = {
        userId: this.$store.state.id,
        articleId: this.$route.query.id,
      };
      this.axios
        .post(url, params, {
          "Context-Type": "application/json",
          headers: { accesstoken: this.$store.state.accesstoken },
        })
        .then((res) => {
          console.log("取消收藏", res);
          if (res.data.code == 5000) {
            this.star_num--;
          }
        });
    },
    starAdd() {
      let url = `/op/collDo/cool`;
      let params = {
        userId: this.$store.state.id,
        articleId: this.$route.query.id,
      };
      this.axios
        .post(url, params, {
          "Context-Type": "application/json",
          headers: { accesstoken: this.$store.state.accesstoken },
        })
        .then((res) => {
          console.log("收藏上传", res);
          // if (res.data.code == 2000 ) {
          //   this.$store.state.goodCont++;}
          this.star_num++;
        });
    },
    
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
.artdet {
  background-color: white;
  width: 100%;
  .headerall {
    top: 0;
    z-index: 1;
    position: fixed;
    width: 100%;
    // background-image: linear-gradient(90deg,yellow,orange,red);
    background-color: white;
    display: flex;
    height: 15vw;
    .header {
      margin-top: 5vw;
      background-color: #fff;
      display: flex;

      .arrow {
        height: 5vw;
        margin-top: 2.5vw;
        margin-left: 2.5vw;
      }
      .headerava {
        width: 10vw;
        height: 10vw;
        border-radius: 100%;
        border-color: black;
      }
      div {
        width: 50vw;
        margin-top: 2.5vw;
        margin-left: 1vw;
      }
      .headerfollow {
        img {
          width: 7vw;
          height: 7vw;
          margin-left: 15vw;
        }
      }
    }
  }
  .content_img {
    .mint-swipe-item img {
      width: 100%;
    }
  }
  .content_det {
    // background-color: #f5d4a9;
    margin-top: 15vw;
    // background-image: linear-gradient(90deg,yellow,orange,red);
    padding: 2vw;
    .content_det_component {
      display: flex;
      flex-wrap: nowrap;
      margin-top: 5vw;
      .timeplace {
        display: flex;
        flex-wrap: nowrap;
        margin-top: 3.5vw;
      }
      .dislike {
        display: flex;
        margin-left: 35vw;

        i {
          display: none;
        }
        .popup {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
          span {
            margin-top: 2vw;
            font-size: 24px;
            vertical-align: middle;
          }
        }
        .van-overlay {
          width: 100%;
        }
        img {
          width: 5vw;
          height: 5vw;
        }
        span {
          font-size: 12px;
          color: #555;
          vertical-align: middle;
        }
      }
    }
  }
  .divider {
    display: flex;
    justify-content: space-between;
    background-image: linear-gradient(90deg, white, #f5d4a9);
    // border-top: 2px dashed orange;
    // border-bottom: 2px dashed orange;
    img {
      width: 5vw;
      height: 5vw;
    }
  }
  .content_comment {
    // background-color: #f5d4a9;
    // background-image: linear-gradient(90deg,yellow,orange,red);
    padding: 2vw;
    margin-bottom: 18vw;
    .comment_component {
      // display: flex;
      margin-top: 2vw;
      .cca {
        display: flex;
        .componentava {
        width: 10vw;
        height: 10vw;
        border-radius: 100%;
        border-color: black;
      }
      span {
        color: gray;
        font-size: 12px;
        margin-top: 3.5vw;
        margin-left: 1vw;
      }
      }
      
      .comment_det {
    margin-top: 2vw;
    margin-left: 5vw;
    border-bottom: 2px dashed orange;
  }
    }
  }
  
  .footer {
    background-color: white;
    bottom: 0;
    z-index: 1;
    position: fixed;
    width: 100%;
    height: 18vw;

    .footerdiv {
      margin-top: 2vw;
      display: flex;
      justify-content: space-between;
      .footer_comment {
        display: flex;
        .addButton {
          margin-left: 1vw;
          margin-top: 2vw;
        }
      }
      .footer_component {
        margin-top: 4vw;
        display: flex;
        justify-content: space-evenly;
        padding-right: 3vw;
        padding-top: 1vw;
        // .liked {
        //   color: orange;
        // }
        // .stared {
        //   color: orange;
        // }
      }
      span {
        padding: 0 2vw;
      }
    }
  }
}
</style>